<template>
	<div class="content_item" @click="goDetails(item)">
		<a-image
			width="200px"
			height="150px"
			:src="item.articleCover"
			footerPosition="outer"
			:preview="false"
			fit="cover"
		>
			<template #extra>
				<h4 class="content_item_title">
					{{ item.articleTitle }}
				</h4>
				<div class="content_item_text">
					<span>{{ item.articleAuthor }}</span>
					<span
						><icon-thumb-up-fill />{{ item.articlesupports }}</span
					>
				</div>
			</template>
		</a-image>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
	item: Object
})
function goDetails() {
	router.push(`/newsDetails/${props.item._id}`)
}
</script>

<style lang="scss" scoped>
.content_item {
	flex: 1;
	display: flex;
	min-width: 250px;
	max-width: 250px;
	height: 230px;
	padding: var(--normal-distance);
	justify-content: center;
	cursor: pointer;
	border-radius: 5px;
	background-color: var(--main-2-bg);
	&:hover {
		box-shadow: 0 0 6px var(--sd-bg);
	}
	.content_item_title {
		width: 200px;
		overflow: hidden; // 溢出隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
		white-space: nowrap; // 规定段落中的文本不进行换行
		color: var(--fc-bg);
	}
	.content_item_text {
		width: 200px;
		display: flex;
		justify-content: space-between;
		color: var(--fc-bg);
	}
}
</style>
